<%@ include file="../../base/include.jsp"%>

<c:url var="addAction" value="/admin/news/add"/>

<form:form id="newsForm" commandName="newsCommand" action="${addAction}" 
	class="form-horizontal" 
	enctype="multipart/form-data"
	>
	<fieldset>	
	<div class="control-group">
		Subject:
		<form:input path="subject" maxlength="100"/>
	</div>
	<div class="control-group">
		Picture:
		<form:input path="imgFile" type="file" />
	</div>
	<div class="control-group">
		URL:
		<form:input path="url" maxlength="128"/>
	</div>
	<div class="control-group">
		<form:textarea path="news" class="span12" style="resize: none;"/>
		<form:errors path="news"/>
	</div>
	<div class="control-group">
		<button id="addButton" class="btn btn-primary" type="submit">Add news</button>
	</div>
	</fieldset>
</form:form>

<c:if test="${not empty newsList}">
	<table class="table table-striped table-condensed">
		<thead>
			<tr>
				<th>Date</th>
				<th colspan="2">Subject</th>
				<th>Text</th>
				<th colspan="2"></th>
			</tr>
		</thead>
		<tbody>
			<c:forEach var="news" items="${newsList.news}">
				<tr>
					<td><fmt:formatDate value="${news.dateCreated }" pattern="dd-MM-yyyy HH:mm" type="date"/></td>
					<td>${news.subject}</td>
					<td>
						<img width="50" height="50" src="<c:url value="/news-img/${news.id}"/>" />
					</td>
					<td>
						${news.news } 
					</td>
					<td>
						<span class="badge badge-info pointerCursor"
							onclick="showMessage(${news.id}, 'deleteNews');"
							title="Delete news">
							<i class="icon-remove icon-white"></i>
						</span>
					</td>
					<td>
						<a href='<c:url value="/admin/news/edit/${news.id}"/>'>
						<span class="badge badge-info pointerCursor"
							title="Edit news">
							<i class="icon-edit icon-white"></i>
						</span>
						</a>
					</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	
	<div id="myModal" class="modal fade in" style="display: none;">
		<div class="modal-header" style="border-bottom: 0px;">
			<a href="#" class="close" data-dismiss="modal">&times;</a>
			<h3>Confirm</h3>
		</div>
		<div class="modal-body">
			<div>
				<p>
					<strong id="message"></strong>
				</p>
			</div>
		</div>
		<div class="modal-footer">
			<div class="alert-actions">
				<a id="btnNo" class="btn btn-primary" href="#" data-dismiss="modal">No</a> 
				<a id="btnYes" class="btn" href="#">Yes</a>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		
	$(function () {
		showSimpleEditor('news', true);
	});
	
	
	function showMessage(id, cmnd) {
		if (cmnd == "deleteNews") {
			document.getElementById('message').innerHTML = "Do you want to delete this news?";
			document.getElementById('btnYes').setAttribute('href', '<c:url value="/admin/news/'+${page}+'/remove/' + id +'"/>');
		} 

		$('#myModal').modal({
			backdrop: true,	
			keyboard: true,
			show: true
		});
	};
	
	var subject = new LiveValidation(document.getElementById('subject'));
	subject.onValid = function() {
		this.insertMessage(document.createElement("span"));
		this.addFieldClass();
	};
	subject.add(Validate.Presence, {
		failureMessage : "Subject can not be empty!"
	});
	
	var news = new LiveValidation(document.getElementById('news'));
	news.onValid = function() {
		this.insertMessage(document.createElement("span"));
		this.addFieldClass();
	};
	news.add(Validate.Presence, {
		failureMessage : "News can not be empty!",
	});
	
	$('#newsForm').submit(function(){
		$('#addButton').prop('disabled', true);
	});
	
	$('#menuNews').addClass('active');
	setActiveMainMenuElem('administration');
</script>

</c:if>